<template>
  <div>
    <el-button type="primary" @click="clickNew" size="mini">新增</el-button>
    <el-drawer :withHeader="false" :visible.sync="dialog" direction="rtl" :with-header="false" ref="drawer"
      size="638px">
      <div style="margin:20px">
        <el-form :model="ruleForm" label-position="right"
         status-icon :rules="rules" ref="ruleForm" label-width="85px" >
          <el-form-item label="项目名称:" prop="projectName" required>
            <el-input class="form-input2" v-model.number="ruleForm.projectName" autocomplete="off" auto-complete="new-password"></el-input>
          </el-form-item>
          <el-form-item label="所属组别:" prop=groupId required>
            <el-select class="form-input2" v-model="ruleForm.groupId" placeholder="所属组别" autocomplete="off" auto-complete="new-password">
              <el-option v-for="item in groupList" :key="item.groupId" :label="item.groupName" :value="item.groupId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="编号缩写:" prop="code" required>
            <el-input class="form-input2" v-model.number="ruleForm.code" autocomplete="off" auto-complete="new-password"></el-input>
          </el-form-item>
          <el-form-item label="项目描述:">
            <el-input class="form-input2" type="textarea" :rows="3" placeholder=""  v-model="ruleForm.describe">
            </el-input>
          </el-form-item>
<!--          <el-divider content-position="left">模块列表</el-divider>-->
<!--          <el-form>-->
<!--            <el-tree :data="pModules" :props="defaultProps"-->
<!--            node-key="id"-->
<!--            :default-expanded-keys="[1]"-->
<!--            :expand-on-click-node="false"-->
<!--            >-->
<!--              <span class="custom-tree-node" slot-scope="{ node, data }">-->
<!--                <el-input size="mini" v-model="data.moduleName" -->
<!--                  v-if="data.needEdit==1" -->
<!--                  :autofocus="true"-->
<!--                  @blur="blur(data)"-->
<!--                  class="edit"-->
<!--                  ></el-input>-->
<!--                <span v-if="data.needEdit==0||data.needEdit==null">{{ node.label }}</span>-->
<!--                <span>-->
<!--                  <el-button-->
<!--                    v-show="data.superior==-1||data.superior==-2"-->
<!--                    type="text"-->
<!--                    size="mini"-->
<!--                    @click="add(data)">-->
<!--                    添加-->
<!--                  </el-button>-->
<!--                  <el-button-->
<!--                    v-show="data.superior!=-2"-->
<!--                    type="text"-->
<!--                    size="mini"-->
<!--                    @click="needEditModule(data)">-->
<!--                    编辑-->
<!--                  </el-button>-->
<!--                  <el-popconfirm-->
<!--                      title="这是一段内容确定删除吗？"-->
<!--                      @onConfirm="remove(node, data)"-->
<!--                    >-->
<!--                      <el-button-->
<!--                        v-show="data.superior!=-2"-->
<!--                        slot="reference"-->
<!--                        type="text"-->
<!--                        size="mini"-->
<!--                        style="margin-left: 8px">-->
<!--                        删除-->
<!--                      </el-button>-->
<!--                  </el-popconfirm>-->
<!--                  -->
<!--                </span>-->
<!--              </span>-->
<!--            </el-tree>-->
<!--          </el-form>-->
          <el-divider content-position="left"></el-divider>
          <el-form-item style="float:right;">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="dialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { getGroup } from '@/api/group';
  import { findAll, add, edit } from '@/api/project'
  export default {
    name: "vuePop",
    data() {
      var checkProjectName = (rule, value, callback) => { !value?callback(new Error('请输入项目名称')):callback() };
      var validateGroup = (rule, value, callback) => { !value?callback(new Error('请选择项目组')):callback() };
      var codeCheck  = (rule, value, callback) => { !value?callback(new Error('请输入代码缩写')):callback() };

      return {
        dialog: false,
        disabled: true,
        ruleForm: {
          describe: '',
          moduleName: '',
          groupLeader: '',
          groupId: '',
          choseMember: [],
          code: ''
        },
        pModules: [{
            id: 1,
            moduleName: '点击右侧添加模块',
            superior: -2,
            children:[],
          }],
        defaultProps: {
          children: 'children',
          label: 'moduleName'
        },
        data: {
          leaderList: [],
          memberList: []
        },
        rules: {
          projectName: [
            { validator: checkProjectName, trigger: 'blur' }
          ],
          groupId: [
            { validator: validateGroup, trigger: 'blur'}
          ],
          code: [
            { validator: codeCheck, trigger: 'blur'}
          ],
        },
        groupList:[]
      }
    },
    methods: {
      add(data) {
        var newModule =
              {
                  moduleId: 0,
                  superior: data.superior==-2?-1:data.moduleId,
                  needEdit: 1,
                  moduleName: "",
                  children: []
              }
          if (data.children == null) {
            data.children = []
          }
          data.children.push(newModule)
      },
      blur(data) {
        data.needEdit = 0
        var moduleName = data.moduleName
        data.moduleName = ''
        data.moduleName = moduleName
      },
      remove(node, data) {
        var nodeId = node.data.$treeNodeId
        var i = 0
        this.pModules[0].children.forEach(mm => {
          if (this.pModules[0].children[i].children!=null && this.pModules[0].children[i].children.length>0) {
            var j = 0
            this.pModules[0].children[i].children.forEach(m3 => {
              if (m3.$treeNodeId==nodeId) {
                this.pModules[0].children[i].children.splice(j, 1)
              }
              j++
            })
          }
          if (mm.$treeNodeId==nodeId) {
            this.pModules[0].children.splice(i, 1)
          }
          i++
        })
      },
      needEditModule(data) {
        data.needEdit = 1
        var moduleName = data.moduleName
        data.moduleName = ''
        data.moduleName = moduleName
      },
      errorMessage(message) {
         this.$notify.error({
          title: '错误',
          message: message
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.disabled
            ?edit(this.ruleForm, this.pModules[0].children).then(response => {
              if (response.code===400) {
                return
              }
              this.$parent.$parent.handleClick()
              this.dialog = false
              }).catch(error => {
                console.log(error)
              })
            :add(this.ruleForm, this.pModules[0].children).then(response => {
              if (response.code===400) {
                return
              }
              this.$parent.$parent.handleClick()
              this.dialog = false
            }).catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        if (this.$refs[formName]!=null) {
          this.$refs[formName].resetFields();
        }
      },
      clickNew(row) {
        this.dialog = true
        this.disabled = false
        if (row.projectId!=null) {
          this.ruleForm.projectId = row.projectId
          this.ruleForm.groupId = row.groupId
          this.ruleForm.projectName = row.projectName
          this.ruleForm.describe = row.describe
          this.ruleForm.code = row.code
          if (row.pModules!==null) {
            this.pModules[0].children = row.modules
          } else {
            this.pModules[0].children = []
          }
          this.disabled = true
        } else {
          this.resetForm('ruleForm')
          // this.ruleForm.projectId = ''
          // this.ruleForm.groupId = ''
          // this.ruleForm.projectName = ''
          // this.ruleForm.describe = ''
        }
      },
      handleRemove(index) {
        this.pModules.splice(index, 1)
      },
      initData() {
        getGroup().then(response => {
          this.groupList = response
        })
      }
    },
    mounted() {
      this.initData()
    }
  }

</script>
<style>
.el-form-item__content{
  margin-left:0 !important;
}
.el-transfer-panel{
   height: 500px !important;
}
.el-transfer-panel__body {
  height: 430px !important;
}
.el-checkbox-group {
  height: 450px !important;
}
.form-input2{
      width: 502px;
}
.form-input3{
      width: 200px;
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>

<style>
.edit.el-input--mini .el-input__inner {
  height: 23px !important;
  width: 100px !important;
  padding-left: 8px;
}
</style>
